<!DOCTYPE html>
<head>
  <title>Moonfire NVR</title>
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<div id="top">
  <a id="toggle-nav">&#x2630;</a>
  <span id="session"></div>
</div>
<div id="nav">
  <form action="#">
    <fieldset>
      <legend>Streams</legend>
      <table id="streams"></table>
    </fieldset>
    <fieldset id="datetime">
      <legend>Date &amp; Time Range</legend>
      <div id="from">
        <legend>From</legend>
        <div id="start-date"></div>
        <label for="start-time">Time:</label>
        <input id="start-time" name="start-time" type="text"
        max-length="20"
        title="Starting time within the day. Blank for the beginning of
        the day. Otherwise HH:mm[:ss[:FFFFF]][+-HH:mm], where F is
        90,000ths of a second. Timezone is normally left out; it's useful
        once a year during the ambiguous times of the &quot;fall
        back&quot; hour.">
      </div>
      <div id="to">
        <legend>To</legend>
        <div id="range">
          <input type="radio" name="end-date-type" id="end-date-same" checked>
          <label for="end-date-same">Same Day</label>
          <input type="radio" name="end-date-type" id="end-date-other">
          <label for="end-date-other">Other Day</label><br/>
        </div>
        <div id="end-date"></div>
        <label for="end-time">Time:</label>
        <input id="end-time" name="end-time" type="text" max-length="20"
        title="Ending time within the day. Blank for the end of the day.
        Otherwise HH:mm[:ss[:FFFFF]][+-HH:mm], where F is 90,000ths of a
        second. Timezone is normally left out; it's useful once a year
        during the ambiguous times of the &quot;fall back&quot; hour.">
      </div>
    </fieldset>
    <fieldset>
    <legend>Recordings Display</legend>
    <label for="split">Max Video Duration:</label>
    <select name="split" id="split">
      <option value="324000000">1 hour</option>
      <option value="1296000000">4 hours</option>
      <option value="7776000000">24 hours</option>
      <option value="infinite">infinite</option>
    </select><br>
    <input type="checkbox" checked id="trim" name="trim">
    <label for="trim" title="Trim each segment of video so that it is fully
    contained within the select time range. When this is not selected,
    all segments will overlap with the selected time range but may start
    and/or end outside it.">Trim Segment Start &amp; End</label><br>
    <input type="checkbox" checked id="ts" name="ts">
    <label for="ts" title="Include a text track in each .mp4 with the
    timestamp at which the video was recorded.">Timestamp Track</label><br>
    <label for="timefmt" title="The time format to use when displaying start
    and end times in the video segment list. Note this currently doesn't
    apply to the start/entry inputs.">Time Format:</label>
    <select name="timefmt" id="timefmt">
      <option value="MM/DD/YY hh:mm A">US-short</option>
      <option value="MM/DD/YYYY hh:mm:ss A">US</option>
      <option value="MM/DD/YY HH:mm" selected>Military-short</option>
      <option value="MM/DD/YYYY HH:mm:ss">Military</option>
      <option value="DD.MM.YY HH:mm">EU-short</option>
      <option value="DD-MM-YYYY HH:mm:ss">EU</option>
      <option value="YY-MM-DD hh:mm A">ISO-short (12h)</option>
      <option value="YY-MM-DD HH:mm">ISO-short (24h)</option>
      <option value="YYYY-MM-DD hh:mm:ss A">ISO (12h)</option>
      <option value="YYYY-MM-DD HH:mm:ss">ISO (24h)</option>
      <option value="YYYY-MM-DD HH:mm:ss">ISO 8601-like (No TZ)</option>
      <option value="YYYY-MM-DDTHH:mm:ss">ISO 8601 (No TZ)</option>
      <option value="YYYY-MM-DDTHH:mm:ssZ">ISO 8601</option>
      <option value="YYYY-MM-DDTHH:mm:ss:FFFFFZ">Internal</option>
    </select>
  </fieldset>
  </form>
</div>
<table id="videos"></table>
<div id="login">
  <form>
    <fieldset>
      <table>
        <tr>
          <td><label for="login-username">Username:</label></td>
          <td><input type="text" id="login-username" name="username"
            autocomplete="username"></td>
        </tr>
        <tr>
          <td><label for="login-password">Password:</label></td>
          <td><input type="password" id="login-password" name="password"
            autocomplete="current-password"></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="submit" tabindex="-1" style="position:absolute; top:-1000px"></td>
        </tr>
      </table>
      <p id="login-error"></p>
    </fieldset>
  </form>
</div>
